<template>
    <div>
        <div class="hobody">
          <div class="tabbar">
            <img :src="logoPic" alt="" style="width:40px;margin-top:20px" v-if="logoPic">
            <div  style="float:right" class="homeAboutUs" @mouseover="topMouseover" @mouseout="topMouseout">
              <a>关于我们</a>
              <ul style=" border:1px solid #f5f5f5;padding:0 20px;position:absolute;top:55px;left:-30px;color:#909399;line-height:40px" class="topAboutUs">
                <li><router-link to="/aboutUs">关于我们</router-link></li>
                <li><router-link to="/contactUs">联系我们</router-link></li>
                <li><router-link to="/joinUs">加入我们</router-link></li>
              </ul>
            </div>
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"  style="float:right">
              <el-menu-item index="1"><router-link to="/">首页</router-link></el-menu-item>
              <el-menu-item index="2"><router-link to="/getActicle">社区精选</router-link></el-menu-item>
              <el-menu-item index="3"><router-link to="/getGoods">精选好品</router-link></el-menu-item>
              <el-menu-item index="4"><router-link to="/downLoad">APP下载</router-link></el-menu-item>
            </el-menu>
            <div style="clear:both"></div>
            
            
          </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'pageTop',
  data () {
    return {
      activeIndex:'0',
    }
  },
  props:['active','logoPic'],
  methods:{
    topMouseover:function(){
      document.getElementsByClassName('topAboutUs')[0].style.display="block";
    },
    topMouseout:function(){
      document.getElementsByClassName('topAboutUs')[0].style.display="none";
    }
  },
  mounted(){
    this.activeIndex=this.active
  }

}
</script>

<style scoped lang="scss">
.hobby{
  width:100%;
}
.topAboutUs{
  z-index:100;
  background:#ffffff;
}

.homeAboutUs{
  font-size:14px;
  margin-left:20px;
  position:relative;
  a{
    color:#909399;
    cursor: pointer;

  }
  a:hover{
    color:#333333;
  }
  li{
    // width:80px;height:20px;
    width:100px;
  }
}
.homeAboutUs>ul{
  display:none
}
.homeAboutUs:hover .homeAboutUs>ul{
  display:block
}
.tabbar{
  .el-menu-item{
    line-height: 2em;
    height:2em;
    padding:0px;
    margin:25px 20px;
  }
}
.hobody{
  
 
    .tabbar{
      line-height: 80px;
      height:80px;
      width: 1200px;
      margin: 0 auto;
      // display:flex;
      // justify-content: space-between;
      a{
        text-decoration: none;
      }
      // height: 1.1vw;
      // border: 1px solid red;
    }
}
.el-menu-item.is-active {
   color: #FF4C50!important;
   border-bottom:1px #FF4C50 solid !important;
}
.el-menu.el-menu--horizontal{
  border:none!important;
}
</style>
